{template 'header'}
<style type="text/css">
.today-starting-page .header-title {
    padding:14px 10px 14px 21px;
}
.today-starting-page .header-title::before {
    content:' ';
    position:absolute;
    width:7px;
    height:22px;
    background:-webkit-linear-gradient(#fe5064, #fe956f);
    top:15px;
    left:10px;
}
.today-starting-page .schedule {
    background:#fff;
    margin:0 10px 10px 10px;
    padding:20px 10px 30px 10px;
    border-radius:8px;
    box-shadow:0 4px 26px -12px #cccbcb;
}
.today-starting-page .schedule .cover {
    min-height:165px;
}
.today-starting-page .schedule .cover img {
    width:110px;
    object-fit:cover;
    box-shadow:0 1px 8px 1px #f0f0f0;
}
.today-starting-page .schedule .author {
    margin-bottom:25px;
    color:#a0a0a0;
}
.today-starting-page .schedule .title {
    margin-bottom:0px;
}
.today-starting-page .schedule .schedule-btn {
    width:91%;
    height:44px;
    border-radius:26px;
    color:#fff;
    font-size:20px;
    -webkit-letter-spacing:2px;
    -moz-letter-spacing:2px;
    -ms-letter-spacing:2px;
    letter-spacing:2px;
    font-weight:600;
    box-shadow:0 3px 22px -11px #ff001d;
}
.today-starting-page .record {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    height:75px;
    margin:10px;
    background-color:#fff;
    border-radius:6px;
    margin-top:12px;
    box-shadow:0 4px 26px -12px #cccbcb;
}
.today-starting-page .record .br {
    height:43px;
    width:0;
    border-left:1px solid #e0e0e0;
    margin-top:17px;
}
.today-starting-page .record .read-day, .today-starting-page .record .read-book {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    width:50%;
    height:100%;
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    padding:0.17rem 0.2rem 0.17rem 0.23rem;
}
.today-starting-page .record .read-day .read-left, .today-starting-page .record .read-book .read-left {
    width:0.4rem;
}
.today-starting-page .record .read-day .read-left img, .today-starting-page .record .read-book .read-left img {
    width:0.4rem;
}
.today-starting-page .record .read-day .read-right, .today-starting-page .record .read-book .read-right {
    padding-left:10px;
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
}
.today-starting-page .record .read-day .read-right p, .today-starting-page .record .read-book .read-right p {
    text-align:center;
}
.today-starting-page .record .read-day .read-right .record-txt, .today-starting-page .record .read-book .read-right .record-txt {
    font-size:0.2rem;
}
.today-starting-page .record .read-day .read-right .record-word, .today-starting-page .record .read-book .read-right .record-word {
    font-size:0.14rem;
}
.today-starting-page .group-block {
    position:fixed;
    height:64px;
    width:100%;
    background-color:#fff;
    box-shadow:0px 2px 6px 0px rgba(0, 0, 0, 0.04);
    padding:0 12px;
    -webkit-transition:all 0.5s;
    transition:all 0.5s;
    max-width:480px;
}
.today-starting-page .group-block img {
    width:40px;
    height:40px;
    margin-right:12px;
}
.today-starting-page .group-block .group-join-btn {
    width:84px;
    height:30px;
    line-height:30px;
    font-size:0.14rem;
    position:absolute;
    right:12px;
    top:50%;
    margin-top:-15px;
}
.book-exam-page .result-word-one {
    font-size:23px;
    margin-bottom:10px;
    font-weight:bold;
}
.book-exam-page .result-p {
    margin:0 50px;
    text-align:justify;
}
.book-exam-page .result-word {
    top:42%;
    text-align:center;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
    font-size:16px;
}
.book-exam-page .result-word span {
    color:#fff95f;
    font-weight:bold;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
}
.book-exam-page .scroll-result {
    position:fixed;
    bottom:2%;
    width:100%;
    left:0;
    text-align:center;
}
@media(max-width:350px) {
    .book-exam-page .medal {
        -webkit-transform:scale(.9) transform-origin:50% 50%;
        -ms-transform:scale(.9) transform-origin:50% 50%;
        transform:scale(.9) transform-origin:50% 50%;
    }
    .book-exam-page .medal .result-word {
        top:38%;
    }
    .book-exam-page .scroll-result {
        -webkit-transform:scale(.8) transform-origin:50% 100%;
        -ms-transform:scale(.8) transform-origin:50% 100%;
        transform:scale(.8) transform-origin:50% 100%;
    }
    .book-exam-page .result-p {
        margin:0 45px;
    }
}
.book-exam-page .progress {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    margin:21px 0;
    margin-top:30px;
}
.book-exam-page .progress span {
    display:block;
    height:14px;
    width:14px;
    text-align:center;
    color:#fe5365;
    font-weight:600;
}
.book-exam-page .progress .schedule-wrap {
    position:relative;
    margin:3px 4px;
    height:8px;
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
    background-color:#fff;
    border-radius:20px;
}
.book-exam-page .progress .schedule-wrap .schedule-bar {
    -webkit-transition 0.3s all position:absolute;
    transition 0.3s all position:absolute;
    left:0;
    right:0;
    width:60%;
    height:100%;
    border-radius:20px;
    background:-webkit-linear-gradient(left, #fe956f, #fe5064);
}
.book-exam-page .schedule {
    right:-47px;
    top:0;
    width:135px;
    padding-top:15px;
    -webkit-animation:read-page-schedule 1s 1s 1;
    animation:read-page-schedule 1s 1s 1;
    -webkit-transition:all 1s;
    transition:all 1s;
}
.book-exam-page .schedule-gif {
    position:fixed;
    width:100%;
    top:0;
    max-width:480px;
    left:0;
    right:0;
    margin:auto;
    z-index:1;
}
.book-exam-page .schedule-gif img {
    width:60px;
    position:absolute;
    right:15px;
    top:30px;
}
.book-exam-page .card {
    background-color:#fff;
    border-radius:10px;
    box-shadow:0 0 33px -13px #c3c3c3;
    padding:13px 21px 0 21px;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
}
.book-exam-page .card.is-left, .book-exam-page .card.is-right {
    position:fixed;
    left:-60px;
    top:35px;
    height:calc(100vh - 110px);
}
.book-exam-page .card.is-right {
    right:-60px;
    left:auto;
}
.book-exam-page .pagination {
    height:60px;
    margin:auto;
    font-size:18px;
    text-align:center;
    position:relative;
    color:#666;
    border-top:1px solid #f1f1f1;
    margin-top:15px;
}
.book-exam-page .pagination .next, .book-exam-page .pagination .pre {
    padding:3px 9px;
    border-radius:15px;
    width:65px;
}
.book-exam-page .pagination .pre {
    border:1px #b5b5b5 solid;
    background:#fff;
    color:#b5b5b5;
}
.book-exam-page .title {
    font-size:16px;
    margin-bottom:15px;
    padding-bottom:15px;
    color:#fe5264;
    border-bottom:1px solid #f1f1f1;
}
.book-exam-page .options .option-item, .book-exam-page .results .option-item {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    padding:11px 8px;
    margin-bottom:3px;
}
.book-exam-page .options .option-item.active, .book-exam-page .results .option-item.active {
    background:#ffe4e6;
}
.book-exam-page .options .option-item .radio, .book-exam-page .results .option-item .radio {
    width:14px;
    height:14px;
    border:solid 1px #868686;
    border-radius:100%;
    margin-right:10px;
    margin-top:2px;
}
.book-exam-page .options .option-item.active .radio, .book-exam-page .results .option-item.active .radio {
    position:relative;
    background-image:url({RES}img/right_icon.png) !important;
    background-size:contain;
    border:none;
}
.book-exam-page .options .option-item.active .radio::after, .book-exam-page .results .option-item.active .radio::after {
    content:' ' position:absolute;
    width:8px;
    height:8px;
    border-radius:100%;
    background:-webkit-linear-gradient(left, #fe956f, #fe5064) top:2px;
    left:2px;
}
.book-exam-page .options .option-item.active .text, .book-exam-page .results .option-item.active .text {
    color:#fe5264;
}
.book-exam-page .options .option-item.success .radio, .book-exam-page .results .option-item.success .radio {
    background-image:url({RES}img/right_icon.png) !important;
    background-size:contain;
    border:none;
}
.book-exam-page .options .option-item.error .radio, .book-exam-page .results .option-item.error .radio {
    background-image:url({RES}img/err_icon.png);
    background-size:contain;
    border:none;
}
.book-exam-page .options .option-item .text, .book-exam-page .results .option-item .text {
    font-size:14px;
    line-height:1.3;
    color:#666;
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
}
.book-exam-page.result .card {
    min-height:calc(100vh - 70px);
    height:auto;
}
.book-exam-page.result .result-title {
    font-size:23px;
}
.book-exam-page.result .sub-result-title {
    font-size:17px;
    color:#999;
    margin-bottom:15px;
}
.book-exam-page.result .intro {
    font-size:14px;
    color:#999;
    padding:23px 0;
    line-height:1.7;
    text-align:justify;
}
.book-exam-page.result .results {
    padding-top:23px;
    border-top:1px solid #f9f9f9;
}
</style>
    <div class="book-exam-page" style="padding: 0px 15px 15px;">
        <div class="progress"><span id="cur_question">1</span>
            <div class="schedule-wrap">
                <div class="schedule-bar"></div>
            </div><span id="total_question"></span>
        </div>
        <div class="card">
            <div class="title"><b id="q-title">1.根据社会交换理论，很多人不想和陌生人沟通</b>
            </div>
            <div class="options" id="q-info">
            </div>
            <div class="pagination g-flex col-center row-between">
                <div id="q-pre" onclick="goPre()" class="pre g-font-14 g-main-bg">上一题</div>
                <div id="q-next" onclick="goNext()" class="next g-font-14 g-main-bg">下一题</div>
            </div>
        </div>
        <div class="g-tip " style="position: fixed; top: -30px; left: 0px; width: 100%; height: 30px; text-align: center; line-height: 30px; background-color: rgb(254, 81, 100); color: rgb(255, 255, 255); letter-spacing: 1px; font-size: 15px; transition: all 0.5s;">请先选择答案</div>
        <div id="start-pic" class="">
            <div class="g-fixed g-img-full g-text-center" style="left: 0px; top: 0px; width: 100%; height: 100%; background: rgb(255, 255, 255); padding: 20px; overflow: auto;">
                <div>
                    <img src="{RES}img/exam.png" style="max-width: 400px; margin-bottom: 10px;">
                </div>
                <p class="g-margin-b">已有<span id="total_mem"></span>人完成测试</p>
                <button onclick="startExam()" class="g-button g-center-block" style="max-width: 400px;">开始测试</button>
            </div>
        </div>
        <div class="g-modal  g-hidden">
            <div class="g-mask"></div>
            <div class="dialog">
                <div class="content">
                    <div class="modal-body">
                        <img src="{RES}img/bremark_fail.png" alt="" style="width: 121px; height: 75.88px; margin-bottom: 17px;">
                        <p style="font-size: 0.18rem; margin-left: 1em;">打卡失败！</p>
                        <p class="g-color-grey" style="font-size: 0.14rem; padding-top: 0.05rem;">如需打卡请前往打卡页面</p>
                    </div>
                </div>
                <div class="g-modal-footer"><a class="g-modal-btn grey" href="javascript:;">取消</a><a class="g-modal-btn active" href="javascript:;">立即打卡</a>
                </div>
            </div>
        </div>
    </div>
{template 'loading'}
<script>
var mem_book_id = getCookie('mem_book');
var chapterid = '{$_GPC["cid"]}';
var question = null;
var answers = [];
var selNums = [];
var cur = 1;
function getInfo(){
	$.ajax({
		url:'{php echo $this->murl("bexam",["did"=>$_GPC["did"]])}',
		data: {bid: mem_book_id},
		type: "post",
		success: function(dat){
			dat = JSON.parse(dat);
			console.log(dat);
			if(dat.code==1){
				$('#total_mem').text(dat.total_mem);
				question = dat.question;
				$('#total_question').text(question.length);
				for(var i=0;i<question.length;i++){
					answers.push(0);
					selNums.push('');
				}
				addQuestion(question);
			}
			else if(dat.code==2){
				msgTip(dat.msg,function(){
					location.href='{php echo $this->murl("bresult",["did"=>$_GPC["did"]])}'
				})
			}
			else{
				msgTip(dat.msg,function(){
					location.href='{php echo $this->murl("index")}'
				})
			}
		}
	});	
}
function addQuestion(question){
	$('#cur_question').text(cur);
	var percent = parseFloat(cur / question.length) * 100;
	$('.schedule-bar').css('width',percent+'%');
	$('#q-title').text(cur+'.'+question[cur-1].title);
	var str = '';
	for (var i in question[cur-1].detail){
		//active样式选中
		var i_str = '';
		if(selNums[cur-1] == i) i_str = 'active';
		str += '<div onclick="selIt(this,'+i+','+question[cur-1].detail[i].issure+')" class="option-item g-push '+i_str+'">';
			str += '<div class="radio"></div>';
			str += '<div class="text">'+question[cur-1].detail[i].title+'</div>';
		str += '</div>';
	}
	$('#q-info').html(str);
	if(cur==1) $('#q-pre').addClass('g-transparent');
	else $('#q-pre').removeClass('g-transparent');
	if(cur == question.length) $('#q-next').text('提交');
	else $('#q-next').text('下一题');
}
function goPre(){
	if(cur==1){
		msgTip('已经是第一题了');
		return false;
	}
	cur--;
	addQuestion(question);
}
function goNext(){
	if(cur == question.length){
		$.ajax({
			url:'{php echo $this->murl("bexam",["did"=>$_GPC["did"]])}',
			data: {bid: mem_book_id, answers: answers.join(','), selNums: selNums.join(','), op: 'res'},
			type: "post",
			success: function(dat){
				dat = JSON.parse(dat);
				console.log(dat);
				if(dat.code==1){
					msgTip(dat.msg,function(){
						location.href='{php echo $this->murl("bresult",["did"=>$_GPC["did"]])}'
					})
				}
				else{
					msgTip(dat.msg,function(){
						location.href='{php echo $this->murl("index")}'
					})
				}
			}
		})
		return false;
	}
	cur++;
	addQuestion(question);
}
function selIt(obj,index,issure){
	answers[cur - 1] = issure
	selNums[cur - 1] = index
	$('.option-item').removeClass('active')
	$(obj).addClass('active')
}
function startExam(){
	$('#start-pic').addClass('g-hidden');
}
$(function(){
	getInfo();
})
</script>
    
</body></html>